<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>jQuery 显示页面滚动进度</title>
  <style>
    .scroll-bar {
      position: fixed;
      top: 0;
      height: 3px;
      background: #aaff7f;
      transition-duration: 1s, 1s;
      transiton-property: width;
      z-index: 99999
    }

    .scroll-num {
      color: #aaaaff;
      position: fixed;
      top: 1%;
    }
  </style>
</head>
<body>
<div class="scroll-bar"></div>
<span class="scroll-num"></span>

<center>
</center>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
  $(function () {
    for (var i = 0; i < 150; i++) {
      $('center').append('<p>我是用于占位置的信息</p>')
    }
  });

  $(window).scroll(function () {
    var winTop = $(window).scrollTop(),
        docHeight = $(document).height(),
        winHeight = $(window).height();
    var scrolled = (winTop / (docHeight - winHeight)) * 100;

    $('.scroll-bar').css('width', (scrolled + '%'));

    $('.scroll-num').each(function () {
      $(this).text(scrolled.toFixed(0) + '%');
    });
  });
</script>
</body>
</html>
